<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>user</title>
    <meta content="Admin Dashboard" name="description"/>
    <meta content="Mannatthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <link rel="shortcut icon" href="images/favicon.ico">
    <link href="css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="plugins/dataTables/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--设置全局变量，根据权限，控制动态添加的内容的是否显示-->
    <script>
        let hasRoleSuperManger = false;
        let hasDeletePermission = false;
        let hasUpdatePermission = false;
        let hasInsertPermission = false;
    </script>
</head>

<body>
<!--如果有下面的权限，就将变量设置为true，供js文件中进行逻辑判断-->
<shiro:hasPermission name="user:delete">
    <script>
        hasDeletePermission = true;
    </script>
</shiro:hasPermission>
<shiro:hasPermission name="user:update">
    <script>
        hasUpdatePermission = true;
    </script>
</shiro:hasPermission>
<shiro:hasPermission name="user:insert">
    <script>
        hasInsertPermission = true;
    </script>
</shiro:hasPermission>
<shiro:hasRole name="superManger">
    <script>
        hasRoleSuperManger = true;
    </script>
</shiro:hasRole>
<!-- Page-Title -->
<div class="row">
    <div class="col-sm-12">
        <div class="page-title-box">
            <div class="btn-group pull-right">
                <ol class="breadcrumb hide-phone p-0 m-0">
                    <!--<li class="breadcrumb-item"><a href="#">用户</a></li>-->
                </ol>
            </div>
            <h4 class="page-title">用户管理</h4>
        </div>
    </div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
    <div class="col-lg-12">
        <!--User添加模块开始-->
        <div shiro:hasPermission="user:insert" class="card">
            <div class="card-body">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#addUserModal">添加新用户
                </button>
                <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" style="display: none;"
                     aria-hidden="true">
                    <div class="modal-dialog  bounce  animated">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">添加新用户</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>

                            <form class="" id="toAddUser" role="form">

                                <div class="modal-body">
                                    <div class="form-group mb-0">
                                        <label for="addUsername" class="mb-2 pb-1">用户名</label>
                                        <input type="text" class="form-control" name="username" id="addUsername" required
                                               placeholder="用户名"/>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="addPassword" class="my-2 py-1">密码</label>
                                        <div>
                                            <input type="password" name="password" id="addPassword" class="form-control" required
                                                   placeholder="密码"/>
                                        </div>
                                        <div class="m-t-10">
                                            <label for="addEnsure" class="my-2 py-1">确认密码</label>
                                            <input type="password" class="form-control" id="addEnsure" required
                                                   data-parsley-equalto="#addPassword"
                                                   placeholder="再次输入密码"/>
                                        </div>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="addSex" class="my-2 py-1">性别</label>
                                        <div>
                                            <select class="form-control" name="sex" id="addSex">
                                                <option>男</option>
                                                <option>女</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="addEmail" class="my-2 py-1">E-Mail</label>
                                        <div>
                                            <input type="email" class="form-control" name="email" id="addEmail"
                                                   parsley-type="email" placeholder="请输入电子邮箱"/>
                                        </div>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="addRoleId" class="my-2 py-1">角色</label>
                                        <div>
                                            <select class="form-control" name="roleId" id="addRoleId">
                                                <option value="2">作业区管理员</option>
                                                <option value="3">平台管理员</option>
                                                <option value="4">一般用户</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <div>
                                        <button data-dismiss="modal" class="btn btn-secondary waves-effect m-l-5">取消
                                        </button>
                                        <button type="submit" class="btn btn-primary waves-effect waves-light">提交
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--User添加模块结束-->

        <!--User更新模块开始-->
        <div shiro:hasPermission="user:update">
                <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" style="display: none;"
                     aria-hidden="true">
                    <div class="modal-dialog  bounce  animated">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">更新用户信息</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>

                            <form class="" id="toUpdateUser" role="form">

                                <div class="modal-body">

                                    <div class="form-group mb-0">
                                        <label for="updateUsername" class="mb-2 pb-1">用户名</label>
                                        <input type="text" class="form-control" name="username" id="updateUsername" required
                                               placeholder="用户名"/>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updateTel" class="mb-2 pb-1">手机号</label>
                                        <input type="text" class="form-control" name="tel" id="updateTel" required
                                               placeholder="请输入手机号"/>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updatePhone" class="mb-2 pb-1">座机</label>
                                        <input type="text" class="form-control" name="phone" id="updatePhone" required
                                               placeholder="请输入座机"/>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updateDepartmentId" class="mb-2 pb-1">所属单位</label>
                                        <input type="text" class="form-control" name="departmentId" id="updateDepartmentId" required
                                               placeholder="请输入所属单位"/>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updatePosition" class="mb-2 pb-1">职位</label>
                                        <input type="text" class="form-control" name="position" id="updatePosition" required
                                               placeholder="请输入职位"/>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updateSex" class="my-2 py-1">性别</label>
                                        <div>
                                            <select class="form-control" name="sex" id="updateSex">
                                                <option>男</option>
                                                <option>女</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updateEmail" class="my-2 py-1">邮箱</label>
                                        <div>
                                            <input type="email" class="form-control" name="email" id="updateEmail"
                                                   parsley-type="email" placeholder="请输入电子邮箱"/>
                                        </div>
                                    </div>

                                    <div class="form-group mb-0">
                                        <label for="updateRoleId" class="my-2 py-1">角色</label>
                                        <div>
                                            <select class="form-control" name="roleId" id="updateRoleId">
                                                <option value="2">作业区管理员</option>
                                                <option value="3">平台管理员</option>
                                                <option value="4">一般用户</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <div>
                                        <button data-dismiss="modal" class="btn btn-secondary waves-effect m-l-5">取消
                                        </button>
                                        <button type="submit" class="btn btn-primary waves-effect waves-light">提交
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
        </div>
        <!--User更新模块结束-->


        <div class="card">

            <div class="card-body">
                <div id="datatable_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                    <div class="row">
                        <div class="col-sm-12 table-responsive">
                            <table id="datatable" class="table table-bordered dataTable no-footer" role="grid"
                                   aria-describedby="datatable_info" style="width:100%">
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div> <!-- end col -->
</div>
<!-- end row -->
<!-- jQuery  -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/popper.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<!--tableEdit js-->
<script src="plugins/dataTables/js/jquery.dataTables.min.js"></script>
<script src="plugins/dataTables/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/dataTables/js/dataTables.responsive.min.js"></script>

<script src="js/lib/modernizr.min.js"></script>
<script src="js/lib/waves.js"></script>
<script src="js/lib/jquery.nicescroll.js"></script>
<script src="js/lib/modal-animation.init.js"></script>
<script src="js/lib/jquery.form.js"></script>

<!--文件相关js-->
<script src="plugins/dataTables/js/dataTables.buttons.min.js"></script>
<script src="plugins/dataTables/js/jszip.min.js"></script>
<script src="plugins/dataTables/js/buttons.html5.min.js"></script>

<!-- Parsley js 表单验证-->
<script type="text/javascript" src="plugins/parsley/parsley.min.js"></script>

<!-- App js -->
<script src="js/lib/app.js"></script>
<script src="js/lib/md5.js"></script>
<script src="js/pages/table.js"></script>
<script src="js/pages/mgr/user.js"></script>
</body>
</html>